<template>
    <div class="statistics-mission-home">
        <el-card shadow="never" class="filter" v-loading="loading">
            <div class="page-title">全员学习任务清单</div>
            <div class="flex mt-4">
                <el-input v-model="keyword" placeholder="输入用户名或用户账号邮箱" class="input-width mr-2"></el-input>
                <el-button @click="fetchData" type="primary">搜索</el-button>
                <el-button @click="onReset" type="primary">重置</el-button>
            </div>
            <div class="content flex flex-wrap mt-8">
                <div class="card" v-for="item in data" :key="item.id" @click="toDetail(item.id)">
                    <div class="name">{{ item.name }}</div>
                    <div v-if="item.completed_num" class="time">
                        最后提交时间  {{ item.final_submission_at | formatTime }}
                    </div>
                    <div style="height: 40px;" v-else></div>
                    <div class="card-number flex">
                        <div class="item">
                            <div class="num">{{ item.completed_num ? +item.completed_num : 0 }}</div>
                            <div class="desc">已完成</div>
                        </div>
                        <div class="item">
                            <div class="num">{{ item.undone_num ? +item.undone_num : 0 }}</div>
                            <div class="desc">未完成</div>
                        </div>
                        <div class="item">
                            <div class="num">{{ item.completion_rate ? +item.completion_rate : 0 }}%</div>
                            <div class="desc">完成率</div>
                        </div>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    components: {
    },
    data() {
        return {
            loading: false,
            data: [],
            keyword: '',
        };
    },
    methods: {
        fetchData() {
            this.loading = true;
            API.get('task/user/tasks/list', { params: {keyword: this.keyword} }).then((res) => {
                this.data = res;
            }).finally(() => {
                this.loading = false;
            });
        },

        onReset() {
            this.keyword = '';
            this.fetchData();
        },

        toDetail(id) {
            this.$router.push({
                name: 'StatisticsMissionDetail',
                params: {
                    id,
                },
            });
        },
    },
    mounted() {
        this.fetchData();
    },
};
</script>

<style lang="scss">
.statistics-mission-home {
    .page-title {
        position: relative;
        padding-left: 8px;

        &::before {
            content: '';
            position: absolute;
            left: 0;
            width: 4px;
            height: 100%;
            background: rgb(24, 144, 255);
            border-radius: 2px;
        }
    }

    .input-width {
        width: 100%;
        max-width: 300px;
    }

    .content {
        width: calc(100% + 38px);
    }

    .card {
        width: 345px;
        padding: 22px 25px;
        box-sizing: border-box;
        box-shadow: 0 0 6px 2px rgb(232, 233, 238);
        border-radius: 6px;
        margin-right: 38px;
        margin-bottom: 38px;
        cursor: pointer;
        transition: all .1s;

        &:hover {
            box-shadow: 0 0 15px 2px rgb(232, 233, 238);
        }
    }

    .name {
        font-size: 22px;
        color: rgb(96, 98, 102);
        margin-bottom: 10px;
    }

    .time {
        font-size: 12px;
        margin-bottom: 27px;
        color: rgb(180, 180, 180);
    }

    .item {
        flex: 1;
        text-align: center;

        &:nth-child(2) {
            border-right: 1px solid rgb(221, 223, 230);
            border-left: 1px solid rgb(221, 223, 230);
            box-sizing: border-box;
        }
    }

    .num {
        font-size: 24px;
        margin-bottom: 7px;
        color: rgb(24, 144, 255);
    }

    .desc {
        font-size: 14px;
        color: rgb(96, 98, 102);
    }
}
</style>
